import { computed, defineComponent, ref } from 'vue';
import Basic from './Basic.vue';
import BasicHorizontal from './BasicHorizontal.vue';
import GenerateItems from './GenerateItems.vue';
import ScrollArea from './ScrollArea.vue';
import ScrollTargetId from './ScrollTargetId.vue';
import ScrollTargetRef from './ScrollTargetRef.vue';
import ScrollTo from './ScrollTo.vue';
import TableBasic from './TableBasic.vue';
import TableBasicHeader from './TableBasicHeader.vue';
import TableSticky from './TableSticky.vue';
import TableSticky2 from './TableSticky2.vue';
import VariousContent from './VariousContent.vue';
import VariousContentHorizontal from './VariousContentHorizontal.vue';
import VirtscrollExpandedRow from './VirtscrollExpandedRow.vue';
import VirtscrollMultipleRows from './VirtscrollMultipleRows.vue';

export default defineComponent({
  name: 'App',
  props: {},
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <h5 class='title'>Basic</h5>
            <Basic />
          </div>
          <div class='block-'>
            <h5 class='title'>BasicHorizontal</h5>
            <BasicHorizontal />
          </div>
          <div class='block-'>
            <h5 class='title'>GenerateItems</h5>
            <GenerateItems />
          </div>
          <div class='block-'>
            <h5 class='title'>ScrollArea</h5>
            <ScrollArea />
          </div>
          <div class='block-'>
            <h5 class='title'>ScrollTargetId</h5>
            <ScrollTargetId />
          </div>
          <div class='block-'>
            <h5 class='title'>ScrollTargetRef</h5>
            <ScrollTargetRef />
          </div>
          <div class='block-'>
            <h5 class='title'>ScrollTo</h5>
            <ScrollTo />
          </div>
          <div class='block-'>
            <h5 class='title'>TableBasic</h5>
            <TableBasic />
          </div>
          <div class='block-'>
            <h5 class='title'>TableBasicHeader</h5>
            <TableBasicHeader />
          </div>
          <div class='block-'>
            <h5 class='title'>TableSticky</h5>
            <TableSticky />
          </div>
          <div class='block-'>
            <h5 class='title'>TableSticky2</h5>
            <TableSticky2 />
          </div>
          <div class='block-'>
            <h5 class='title'>VariousContent</h5>
            <VariousContent />
          </div>
          <div class='block-'>
            <h5 class='title'>VariousContentHorizontal</h5>
            <VariousContentHorizontal />
          </div>
          <div class='block-'>
            <h5 class='title'>VirtscrollExpandedRow</h5>
            <VirtscrollExpandedRow />
          </div>
          <div class='block-'>
            <h5 class='title'>VirtscrollMultipleRows</h5>
            <VirtscrollMultipleRows />
          </div>
        </div>
      );
    };
  },
});
